<html>
<head>
    <title>Simple demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <style type="text/css">
        html, body, p, div, br, input{
            margin:0;
            padding:0;
        }
        html,body{
            font-family:Helvetica;
            font-size:14px;
            font-weight:bold;
            color:#222;
            width:100%;
            height:100%;
        }
        #wrapper{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .divStack{
            padding:10px;
            margin:20px;
            text-align:center;
        }
        #div1{
            background:#ABA73C;
        }
        #div2{
            background:#606873;
        }
        input[type=button]
        {
            padding:5px;
        }
    </style>
    <script type="text/javascript">
        window.addEventListener('load',init,false);

        function init()
        {
            document.getElementById('btn1').addEventListener('click',button1Clicked,false);
            document.getElementById('btn2').addEventListener('click',button2Clicked,false);
        }
        function button1Clicked()
        {
            console.log('Button 1 Clicked');
        }
        function button2Clicked()
        {
            console.log('Button 2 Clicked');
        }
    </script>
</head>
<body>
        <div id="wrapper">
            <div id="div1" class="divStack"><p>First Div</p></div>
            <div id="div2" class="divStack"><p>Second Div</p></div>
            <div class="divStack">
                <input id="btn1" type="button" value="Button1" />
                <input id="btn2" type="button" value="Button2" />
            </div>
        </div>
</body>
</html>
